<template>
	<!-- 商品列表 -->
	<view class="">
		aaaa
	</view>
	<view class="product-list">
		<view class="product-item" v-for="(item, index) in ProList" :key="item.id" @click="goDetail(item.id)">
			<image :src="item.coverImage" mode="aspectFill"></image>
			<view class="product-info">
				<text class="product-name">{{ item.name }}</text>
				<text class="product-price">￥{{ item.price }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { defineProps } from 'vue';

const props=defineProps({
	ProList:{
		type:Array,
		default:()=>[]
	}
})

// 进入详情页
	function goDetail(id) {
		uni.navigateTo({
			url: "/pages/xiangqing/xiangqing?id=" + id
		})
	}


</script>

<style scoped>

	.product-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.product-item {
		width: 48%;
		border: 1px solid #ccc;
		border-radius: 5px;
		overflow: hidden;
	}

	.product-item image {
		width: 100%;
		height: 150px;
	}

	.product-info {
		padding: 10px;
	}

	.product-name {
		font-size: 16px;
		margin-bottom: 5px;
	}

	.product-price {
		font-size: 14px;
		color: #f00;
	}
</style>